<template>
  <div class="top">
    <div class="logo"><a href="Index.html"><img src="@/assets/images/logo.png" /></a></div>
    <div class="search">
        <form @submit.prevent="searchSubmit">
            <input type="text" v-model="searchTxt" class="s_ipt" />
            <input type="submit" value="搜索" class="s_btn" />
        </form>                      
        <!-- <span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a></span> -->
    </div>
    <!-- 非登录用户选中的商品存localStorage中，登录用户存redis和数据库 -->
    <div class="i_car" @mouseenter="checkOrderCar">
        <div class="car_t">购物车 [ <span v-if="order && order.orderDetailList">{{order.orderDetailList.length}}</span><span v-if="!order">0</span> ]</div>
        <div class="car_bg">
            <!--Begin 购物车未登录 Begin-->
            <div class="un_login" v-show="type != 0 && type != 1">还未登录！<router-link :to="{name:'Login'}" style="color:#ff4e00;">马上登录</router-link> 查看购物车！</div>
            <!--End 购物车未登录 End-->
            <!--Begin 购物车已登录 Begin-->
            <!-- 登录的用户和游客用户分开展示，因为登录用户 -->
            <ul class="cars" v-if="this.type"> 
                <el-empty v-if="order == null || order.orderDetailList == null || order.cost <= 0" description="空空如也，赶紧去购买商品吧~"></el-empty>
                <template v-if="order != null && order.orderDetailList != null">
                    <li v-for="orderDetail in order.orderDetailList" :key="orderDetail.productId">
                        <div class="img"><router-link :to="{name: 'GoodsDetail', params: {id: orderDetail.productId}}"><img :src="imagesDir + orderDetail.fileName" width="58" height="58" /></router-link></div>
                        <div class="name"><router-link :to="{name: 'GoodsDetail', params: {id: orderDetail.productId}}">{{orderDetail.name}}</router-link></div>
                        <div class="price"><font color="#ff4e00">￥{{orderDetail.cost}}</font> X{{orderDetail.quantity}}</div>
                    </li>
                </template>
            </ul>
            <div class="price_sum" v-if="order != null && order.orderDetailList != null && order.cost > 0">共计&nbsp; <font color="#ff4e00">￥</font><span>{{order.cost}}</span></div>
            <div class="price_a" v-if="type == 0 || type == 1">
                <router-link v-if="order != null && order.orderDetailList != null && order.orderDetailList.length != 0" :to="{name: 'OrderPreparation'}">去购物车结算</router-link>
                <router-link v-if="order == null || order.orderDetailList == null || order.cost == 0" :to="{name: 'GoodsList', query: {searchTxt: ''}}">去购物</router-link>
            </div>
            <!-- <div class="price_a" v-if="type != 0 && type != 1"><router-link :to="{name:'Login'}">去登录</router-link></div> -->
            <!--End 购物车已登录 End-->
        </div>
    </div>
</div>
</template>

<script>
import Vue from 'vue'
import {Empty} from 'element-ui'
Vue.use(Empty)
export default {
    data() {
        return {
            searchTxt: '',
            type: sessionStorage.getItem("type"), //获取用户类型
            order: null,
            imagesDir: sessionStorage.getItem("imagesDir")
        }
    },
    methods: {
        searchSubmit() {
            this.$router.push({
                name: 'GoodsList',
                query: {
                    searchTxt: this.searchTxt
                }
            }).catch(err => {
                // 忽略重复导航的错误
                if (err.name !== 'NavigationDuplicated') {
                    // 如果不是重复导航错误，重新抛出
                    throw err
                }
            });
        },
        getOrderCar() {
            if(this.type) {     //不考虑游客用户
                this.$axios({
                    url: '/api/order/car',
                    method: 'POST',
                }).then(rs => {
                    if(rs.data.code == 5200) {
                        this.order = rs.data.orderList[0];
                        console.log("order", this.order);
                    }
                    else {
                        console.log("err: " + rs.data.msg);
                    }
                })
            }
            
        },
        checkOrderCar() { //当鼠标上来时，检测一下order状态，可能在其他地方order改变了
            if(this.type)
                this.getOrderCar();
        }
    },
    watch: {
        "order": {
            deep: true,
            handler(newOrder) {
                if(this.type)
                    this.$store.commit("setOrder", newOrder)
            }
        }
    },
    created() {
        //获取购物车中order数据，若登录直接访问后端，若未登录去localStorage中查找
        if(this.type)
            this.getOrderCar();
    }
}
</script>

<style>

</style> 